<template>
<div class=" kbWap">
    <div class="kbTop">
        <span class="span" v-for="(item, index) in kbMenu" :class="index == kbMenuType?'active':''" @click="kbMenuType = index" :key="index">{{item.name}}</span>
    </div>
    <div class="kbCont pad20TB" style="padding-bottom: 0">
        <el-row>
            <el-col :span="4" v-for="(item, index) in kbList" :key="index">
                <div class="div">
                    <div class="h" :style="{background: item.color}">
                        <span class="title">{{item.title}}</span>
                    </div>
                    <div class="c btm10" v-for="(item2, index2) in item.list" :key="index2">
                        <p class="font18 col333">{{item2.a}}</p>
                        <p class="font16 col999 top10">{{item2.b}}</p>
                        <p class="colblue top30">进度:{{item2.c}}%</p>
                        <div class="jdt top5">
                            <div class="per" :style="{width: item2.c + '%'}"></div>
                        </div>
                        <p class=" colred top10">{{item2.d}}截止</p>
                        
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            kbMenuType: 0,
            kbMenu: [
               {name: '任务'},
               {name: '日程'},
               {name: '文件'},
               {name: '统计'},
               {name: '近期的事'},
            ],
            kbList: [
                {title: '待处理', color: 'rgba(93, 145, 255, 1)', list: [
                    {a: '老年人能力评估', b:'评估机构资质审核', c:'0', d: '8月30号' },
                    {a: '服务中心建设进度', b:'评估机构资质审核', c:'0', d: '9月15号' },
                ]},
                {title: '进行中', color: 'rgba(255, 174, 56, 1)', list: [
                    {a: '服务中心建设进度', b:'评估机构资质审核', c:'80', d: '8月15号' },
                    {a: '床位建设进度', b:'评估机构资质审核', c:'75', d: '8月28号' },
                ]},
                {title: '已完成', color: 'rgba(86, 215, 86, 1)', list: [
                    {a: '床位建设进度', b:'评估机构资质审核', c:'100', d: '7月31号' },
                    {a: '养老机构评级', b:'评估机构资质审核', c:'100', d: '7月31号' },
                ]},
                {title: '会议记录', color: 'rgba(195, 141, 255, 1)', list: [
                    {a: '养老机构评级', b:'评估机构资质审核', c:'90', d: '8月3号' },
                    {a: '养老服务补贴资金使用', b:'评估机构资质审核', c:'88', d: '8月2号' },
                ]},
                {title: '文档', color: 'rgba(253, 109, 143, 1)', list: [
                    {a: '养老服务补贴资金使用', b:'评估机构资质审核', c:'95', d: '8月5号' },
                    {a: '养老机构评级', b:'评估机构资质审核', c:'90', d: '8月10号' },
                ]},
                {title: '待改进', color: 'rgba(255, 93, 82, 1)', list: [
                    {a: '养老服务补贴资金使用', b:'评估机构资质审核', c:'65', d: '8月31号' },
                    {a: '养老机构评级', b:'评估机构资质审核', c:'50', d: '8月31号' },
                ]}
            ]
        };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
        
    }
};
</script>

<style scoped>

</style>
